import styles from './styles.less';
import {Button, Col, DatePicker, Form, Input, Row, Select} from 'antd';
import 'dayjs/locale/zh-cn';
import {connect} from 'umi';
import {filterValues} from '@/utils/utils';
import locale from "antd/es/date-picker/locale/zh_CN";

const {RangePicker} = DatePicker;

const SearchForm = (props) => {

  const {submitting, salerLinkList} = props;
  const {setTablePayload, tablePayload} = props.data;
  const [form] = Form.useForm();

  /* 搜索提交 */
  const onFinish = (values) => {
    setTablePayload({...tablePayload, pageNum: 1, param: {...filterValues(values)}});
  };

  /* 搜索重置 */
  const onReset = () => {
    form.resetFields();
    setTablePayload({...tablePayload, pageNum: 1, param: {}});
  };

  return (
    <Form form={form} labelCol={{span: 6}} className={styles.mySearchForm} onFinish={onFinish}>
      <Row gutter={12}>
        <Col span={8}>
          <Form.Item name={`custMobile`} label={`客户手机`}>
            <Input placeholder='请输入客户手机'/>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item name={`salerId`} label={`分销员`}>
            <Select
              placeholder='请选择分销员' options={salerLinkList} allowClear showSearch
              filterOption={(input, option) => (option?.label ?? '').includes(input)}
            />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item name={`dateRange`} label={`创建时间`}>
            <RangePicker locale={locale} style={{width: '100%'}} format={'YYYY-MM-DD'}/>
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={12} style={{marginTop: 12}}>
        <Col span={8}>
          <Form.Item name={`orNew`} label={`客户属性`}>
            <Select placeholder='请选择客户属性'>
              <Select.Option value={'0'}>老客户</Select.Option>
              <Select.Option value={'1'}>新客户</Select.Option>
            </Select>
          </Form.Item>
        </Col>
        <Col span={16} style={{textAlign: 'right'}}>
          <Button type='primary' htmlType='submit' loading={submitting}>
            查询
          </Button>
          <Button style={{margin: '0 8px'}} onClick={() => onReset()}>
            重置
          </Button>
        </Col>
      </Row>
    </Form>
  );
};

export default connect(({loading, CampainCommon}) => {
  return {
    submitting: loading.effects['POperationCampainUser/fetchList'],
    salerLinkList: CampainCommon.salerLinkList
  };
})(SearchForm);
